<script setup>

    import { reactive, computed, ref ,onMounted, watch,inject} from 'vue'
    import rankAward from './rankAward.vue'
    import { useStore } from 'vuex'
    import Toast from '../../../components/toast.vue';
    import EmptyData from '../../../components/emptyData.vue';
    import empty from '@/assets/img/empty.png'
    const store = useStore()
    const api = store.state.api
    const common = store.state.common.obj
    const isAnchor = store.state.isAnchor
    const isAndroid = store.state.isAndroid //安卓
    const isiOS = store.state.isiOS //ios
    const goTop = inject('methods').goTop
    // 跳转房间
    const jumpRoom = inject('methods').jumpInterRoom

    const subString = inject('methods').subString

    // 日期
    let calenderList = reactive({
         result: []
    })
    const calendar = computed(() => {
        return calenderList.result
    })

    const curDay = ref(0)
    const getToday = async () => {
        await api.leg3Calendar().then(res => {
            let data = res.data.result
            if (data) {
                calenderList.result = data
                data.forEach(item => {
                    if (item.flag == 1){
                        tabIndex.value = item.calendarId
                        curDay.value = item.calendarId
                    }
                });
                if(tabIndex.value==0){
                    tabIndex.value = 1
                    curDay.value = 6
                }
                if(tabIndex.value<4){
                    getwinsRank()
                    getmyRank()
                }else{
                    nextBtn(3,3)
                }
            }
        })
    }

    let preBtn=function(e,num){
        if(isAndroid||isiOS){
            let rem = /\d+/.exec(document.querySelector('html').getAttribute('style'))[0]
            document.querySelectorAll('#tab')[0].scrollLeft = document.querySelectorAll('#tab')[0].scrollLeft-rem*1.8*(num||1)
        }else{
            document.querySelectorAll('#tab')[0].scrollLeft = document.querySelectorAll('#tab')[0].scrollLeft-200*(num||1)
        }
    }
    let nextBtn=function(e,num){
        if(isAndroid||isiOS){
            let rem = /\d+/.exec(document.querySelector('html').getAttribute('style'))[0]
            document.querySelectorAll('#tab')[0].scrollLeft = document.querySelectorAll('#tab')[0].scrollLeft+rem*1.8*(num||1)
        }else{
            document.querySelectorAll('#tab')[0].scrollLeft = document.querySelectorAll('#tab')[0].scrollLeft+200*(num||1)
        }
    }

    // 日期点击事件
    let tabIndex = ref(0)
    const getTabIndex = (index) => {
        if (tabIndex.value == index){
             return
        }else if(index>curDay.value){
            store.dispatch('asyncTips', { isShow: true, msg: '赛段暂未开启，请耐心等待~' })
            return
        }
        tabIndex.value = index
    }

    // 日期index
    let leg3P1Index = ref(0)
    const getLeg3P1Index = (index) => {
        if (leg3P1Index.value == index) return
        leg3P1Index.value = index
    }
    // 阶段leg3-2 tab点击事件
    let leg3P2Tab1Index = ref(0)
    const getLeg3P2Tab1Index = (index) => {
        if (leg3P2Tab1Index.value == index) return
        leg3P2Tab1Index.value = index
    }

     // 阶段leg3-2 tab2点击事件
    let leg3P2Tab2Index = ref(0)
    const getleg3P2Tab2Index = (index) => {
        if (leg3P2Tab2Index.value == index) return
        leg3P2Tab2Index.value = index
    }

    //分组赛况 tab点击事件
    let saikuangTabIndex = ref(0)
    const getsaikuangTabIndex = (index) => {
        if (saikuangTabIndex.value == index) return
        saikuangTabIndex.value = index
    }

    //AB组PK赛程 时间线 tab点击事件
    let saichengTimeTabIndex = ref(-1)
    const getsaichengTimeTabIndex = (index) => {
        if (saichengTimeTabIndex.value == index) return
        saichengTimeTabIndex.value = index
    }

    
    
    
    let winsRank = reactive({result: {}})
    const getwinsRank = async (pageAfter) => {
        await api.leg3winsRank({ page: 0 ,calendarId:calendar.value[tabIndex.value-1].calendarId}).then(res => {
            if (res.data.result) {
                winsRank.result = res.data.result
            }
        })
    }
    const winsRanDet = computed(() => {
        return winsRank.result
    })

    let myRank = reactive({result: {}})
    const getmyRank = async (pageAfter) => {
        await api.leg3myRank({ anchorId: isAnchor ? common.userId : common.anchorId ,calendarId:calendar.value[tabIndex.value-1].calendarId}).then(res => {
            // if (res.data.result) {
                myRank.result = res.data.result
            // }
        })
    }
    const myRankDet = computed(() => {
        return myRank.result
    })
    
    //分组赛况
    let groupshow = reactive({result: {}})
    const getgroupshow = async (pageAfter) => {
        await api.leg3GroupShow({ group: saikuangTabIndex.value }).then(res => {
            if (res.data.result) {
                groupshow.result = res.data.result
            }
        })
    }
    const groupshowDet = computed(() => {
        return groupshow.result
    })

    //组内胜场榜(第一、三天)
    let anchor_day_group_rank = reactive({result: {}})
    const getAnchor_day_group_rank = async (pageAfter) => {
        await api.leg3AnchorDayGroupRank({ group: leg3P2Tab1Index.value==1?0:1,day: tabIndex.value-4}).then(res => {
            if (res.data.result) {
                anchor_day_group_rank.result = res.data.result
                getFail_line(leg3P2Tab1Index.value==1?0:1)
                clearInterval(commonTimer)
                commonTimer = setInterval(() => {
                    getAnchor_day_group_rank()
                }, 30*1000);
            }
        })
    }
    const anchor_day_group_rankDet = computed(() => {
        return anchor_day_group_rank.result
    })

    //淘汰线
    let fail_line = reactive({result: {}})
    const getFail_line = async (group) => {
        
        await api.leg3Fail_line({ group: group,day: tabIndex.value-4}).then(res => {
            if (res.data.result) {
                fail_line.result[group] = res.data.result
            }
        })
            
        
    }
    const fail_lineDet = computed(() => {
        return fail_line.result
    })

    //PK时间线
    let get_pk_times_list = reactive({result: {}})
    const get_pk_times = async (pageAfter) => {
        await api.leg3GetPkTimes({ group: leg3P2Tab1Index.value==1?0:1,day: tabIndex.value-4}).then(res => {
            if (res.data.result) {
                res.data.result.forEach(function(a,b,c){
                    if( a.open && (!c[b+1]||!c[b+1].open) ){
                        saichengTimeTabIndex.value = b
                    }
                })
                get_pk_times_list.result = res.data.result
                get_pk_configsFunc()
            }
        })
    }
    const get_pk_times_listDet = computed(() => {
        return get_pk_times_list.result
    })

     //PK对战表
    let get_pk_configs = reactive({result: {}})
    const get_pk_configsFunc = async (pageAfter) => {
        await api.leg3get_pk_configs({ group: leg3P2Tab1Index.value==1?0:1,day: tabIndex.value-4,index: saichengTimeTabIndex.value}).then(res => {
            if (res.data.result) {
                get_pk_configs.result = res.data.result
            }
        })
    }
    const get_pk_configsDet = computed(() => {
        return get_pk_configs.result
    })

    //第二日分组PK战况
    let get_group_detail = reactive({result: {}})
    const get_group_detailFunc = async (pageAfter) => {
        await api.leg3GetGroupDetail({ day: 1,index: 0}).then(res => {
            if (res.data.result) {
                get_group_detail.result = res.data.result
                getFail_line(0)
                getFail_line(1)
                clearInterval(commonTimer)
                commonTimer = setInterval(() => {
                    get_group_detail()
                }, 30*1000);
            }
        })
    }
    const get_group_detailDet = computed(() => {
        return get_group_detail.result
    })

    const get_group_place = async (pageAfter) => {
        await api.leg3get_group_place({ day: tabIndex.value-4,anchorId: common.anchorId}).then(res => {
            if (res.data.result) {
                if(res.data.result.group==0){
                    leg3P2Tab1Index.value = 1
                }else if(res.data.result.group==1){
                    leg3P2Tab1Index.value = 2
                }
            }else{
                leg3P2Tab1Index.value = 1
            }
        })
    }

    let commonTimer
    let timer1
    watch(tabIndex, (newVal) => {
        if(newVal<4){
            leg3P1Index.value = 0
            getwinsRank()
            getmyRank()
            clearInterval(commonTimer)
            clearInterval(timer1)
            timer1 = setInterval(() => {
                getwinsRank()
                getmyRank()
            }, 30*1000);
        }else{
            clearInterval(timer1)
            if(newVal==5){
                leg3P2Tab1Index.value = 3
            }else{
                get_group_place()
            }
        }
    })

    watch(leg3P2Tab1Index, (newVal) => {
        saikuangTabIndex.value = 0
        leg3P2Tab2Index.value = 0
        if(newVal==1||newVal==2){
            getAnchor_day_group_rank()
        }else if(newVal==3){
            leg3P2Tab2Index.value =1
            get_group_detailFunc()
        }else if(newVal==0){
            getgroupshow()
        }
    })

    watch(saikuangTabIndex, (newVal) => {
       getgroupshow()
    })

    watch(leg3P2Tab2Index, (newVal) => {
        if(newVal == 2){
            get_pk_times()
        }
    })

    watch(saichengTimeTabIndex, (newVal) => {
         get_pk_configsFunc()
    })

    
    
    

    let timer

    onMounted((pageAfter) => {
        getToday()
        timer = setInterval(() => {
        }, 30 * 1000);
    })



</script>

<template>
    <div class="leg3">
        <ul class="tab">
            <div class="pre" @click="preBtn"></div>
            <div class="next" @click="nextBtn"></div>
            <div class="tabWrap" id="tab">
                <div class="list">
                    <li v-for="(item, index) in calendar" :key="index" :class="{ active: tabIndex == item.calendarId }"
                        @click="getTabIndex(item.calendarId)">{{ item.title }}
                    </li>
                </div>
            </div>
        </ul>
        <div class="content" v-if="tabIndex<4">
            <div class="rule">
                <p v-if="tabIndex==1">主播自行发起联赛PK，根据今日有效胜场排名（<span>PK票≥50,000票</span>），淘汰末位20名主播</p>
                <p v-if="tabIndex==2">主播自行发起联赛PK，根据今日有效胜场排名（<span>PK票≥100,000票</span>），淘汰末位20名主播</p>
                <p v-if="tabIndex==3">主播自行发起联赛PK，根据今日有效胜场排名（<span>PK票≥150,000票</span>），淘汰末位20名主播</p>
            </div>
            <div class="rankBox_box">
                <div class="rankBox">
                    <ul class="rankTab">
                        <p></p>
                        <li v-for="(item, index) in ['有效胜场榜', '联赛壕礼']" :key="index" :class="{ active: leg3P1Index == index }"
                            @click="getLeg3P1Index(index)">{{ item }}
                        </li>
                    </ul>
                    <div class="winRank" v-if="leg3P1Index == 0" :tab-index="tabIndex">
                        <div class="til">
                            <div class="rankNum">排名</div>
                            <div class="nick">主播昵称</div>
                            <div class="uid">ID</div>
                            <div class="wins">今日有效胜场</div>
                        </div>
                        <div class="list" >
                            <div class="item" v-for="(item, index) in winsRanDet.list " :key="index" :id="'leg3Rank' + index">
                                <div class="devideLine" v-if="index==winsRanDet.list.length-20">
                                    <span></span>
                                    以下为淘汰区
                                    <span></span>
                                </div>
                                <div class="itemWrap" :class="{grey:index>=winsRanDet.list.length-20}" >
                                    <div class="rankNum">{{item.rankNo}}</div>
                                    <div class="nick">{{subString(item.anchorName,8,true)}}</div>
                                    <div class="uid">{{item.anchorId}}</div>
                                    <div class="wins">{{item.scores}}</div>
                                </div>
                            </div>
                            <EmptyData  v-if="!winsRanDet.list||winsRanDet.list.length<1"/>
                        </div>
                        <div class="goTop"  @click="goTop('leg3Rank0')"></div>
                        <div class="myRank" v-if="myRankDet">
                            <div class="til">
                                <span v-if="isAnchor">我的<br>排名</span>
                                <span v-else>当前<br>主播<br>排名</span>
                                <i></i>
                            </div>
                            <div class="myInfo">
                               <div class="rank">
                                    <div class="til">排名</div>
                                    <div class="val">{{myRankDet.rankNo}}</div>
                               </div>
                               <div class="nick">
                                    <div class="til">主播昵称</div>
                                    <div class="val">{{subString(myRankDet.anchorName,8,true)}}</div>
                               </div>
                               <div class="uId">
                                    <div class="til">ID</div>
                                    <div class="val">{{myRankDet.anchorId}}</div>
                               </div>
                               <div class="wins">
                                    <div class="til">今日有效胜场</div>
                                    <div class="val">{{myRankDet.scores}}</div>
                               </div>
                            </div>
                        </div>
                    </div>
                    <rankAward :tab-index="tabIndex" v-else />
                </div>
            </div>
        </div>
        <div class="content2" v-else>
            <div class="tab1">
                <div class="item" :class="{cur:leg3P2Tab1Index==0}"  @click="getLeg3P2Tab1Index(0)">分组赛况</div>
                <div class="item"  v-if="tabIndex==4||tabIndex==6" :class="{cur:leg3P2Tab1Index==1}"  @click="getLeg3P2Tab1Index(1)">A组</div>
                <div class="item"  v-if="tabIndex==4||tabIndex==6" :class="{cur:leg3P2Tab1Index==2}"  @click="getLeg3P2Tab1Index(2)">B组</div>
                <div class="item short"  v-if="tabIndex==5" :class="{cur:leg3P2Tab1Index==3}"  @click="getLeg3P2Tab1Index(3)">A组<span>VS</span>B组</div>
                <div class="item" :class="{cur:leg3P2Tab1Index==4}"  @click="getLeg3P2Tab1Index(4)">联赛壕礼</div>
            </div>
            <div class="fenzu" v-if="leg3P2Tab1Index==0">
                <div class="fenzu_box">
                    <ul class="rankTab">
                        <p></p>
                        <li v-for="(item, index) in ['A组', 'B组']" :key="index" :class="{ active: saikuangTabIndex == index }"
                            @click="getsaikuangTabIndex(index)">{{ item }}
                        </li>
                    </ul>
                    <div class="rankList" v-if="groupshowDet">
                        <li v-if="groupshowDet.length > 0" v-for="(item, index) in groupshowDet" :key="index" :class="{grey:item.loser}">
                            <div class="txWrap">
                                <img v-if="item.state == 2" class="headImg toRoom"
                                    @click="jumpRoom(item.state, item.roomId, item.showtype)" :src="item.ancPic || empty" alt="">
                                <img v-else class="headImg" :src="item.ancPic || empty" alt="">
                                <img v-if="item.state == 2" src="@/assets/img/ceremony/online.gif" alt="" class="online">
                            </div>
                            <p><span class="name">{{ subString(item.anchorName || '酷炫达人',8,true) }}</span><span>ID:{{ item.anchorId }}</span></p>
                            <i>{{ item.rankNo }}</i>
                            <div class="taotai" v-if="item.loser">淘汰</div>
                        </li>
                        <EmptyData v-else />
                    </div>
                </div>
                <div class="bottomBg"></div>
            </div>
            <div class="saikuang" v-else-if="leg3P2Tab1Index==1||leg3P2Tab1Index==2||leg3P2Tab1Index==3">
                <div class="rule">
                    <p v-if="tabIndex==4">主播将与本组内所有主播，各进行一场单局定胜负的联赛PK，根据有效胜场排名，淘汰末位4名主播</p>
                    <p v-if="tabIndex==5">主播将与另一组所有主播，各进行单局定胜负的联赛PK车轮战，为自己与本组累计胜场，根据组间与组内排名淘汰末位主播</p>
                    <p v-if="tabIndex==6">主播将与本组内所有主播，各进行一场单局定胜负的联赛PK，角逐最终晋级的名额</p>
                </div>
                <div class="rankBox_box" >
                    <div class="rankBox">
                        <ul class="rankTab">
                            <p></p>
                            <li :class="{ active: leg3P2Tab2Index == 0 }" @click="getleg3P2Tab2Index(0)" v-if="leg3P2Tab1Index==1||leg3P2Tab1Index==2">组内排名</li>
                            <li :class="{ active: leg3P2Tab2Index == 1 }" @click="getleg3P2Tab2Index(1)" v-else-if="leg3P2Tab1Index==3">对决排名</li>
                            <li :class="{ active: leg3P2Tab2Index == 2 }" @click="getleg3P2Tab2Index(2)">PK赛程</li>
                        </ul>
                        <template v-if="leg3P2Tab1Index==1||leg3P2Tab1Index==2" >
                            <div class="winRank" v-if="leg3P2Tab2Index == 0" :tab-index="leg3P2Tab2Index">
                                <div class="til">
                                    <div class="rankNum">排名</div>
                                    <div class="nick">主播昵称</div>
                                    <div class="uid">ID</div>
                                    <div class="wins">今日有效胜场</div>
                                </div>
                                <div class="list">
                                    <div class="item" v-for="(item, index) in anchor_day_group_rankDet" :key="index" :id="'leg3Rank1Ind' + index">
                                        <div class="devideLine" v-if="index==fail_lineDet[leg3P2Tab1Index-1]">
                                            <span></span>
                                            以下为淘汰区
                                            <span></span>
                                        </div>
                                        <div class="itemWrap" :class="{grey:item.loser}" >
                                            <div class="rankNum">{{item.rankNo}}</div>
                                            <div class="nick">{{subString(item.anchorName,8,true)}}</div>
                                            <div class="uid">{{item.anchorId}}</div>
                                            <div class="wins">{{item.success}}</div>
                                        </div>
                                    </div>
                                    <EmptyData v-if="!anchor_day_group_rankDet||anchor_day_group_rankDet.length<1" />
                                </div>
                                <div class="goTop"  @click="goTop('leg3Rank1Ind0')"></div>
                            </div>
                        </template>
                        <template v-else-if="leg3P2Tab1Index==3" >
                            <div class="winRank" v-if="leg3P2Tab2Index == 1" :tab-index="leg3P2Tab2Index">
                                <div class="taotaiInfo" v-if="get_group_detailDet.groupInfoList">
                                    <div class="til">
                                        <div class="rank">排名</div>
                                        <div class="group">组别</div>
                                        <div class="winNum">本组总胜场</div>
                                        <div class="lostNum">淘汰人数</div>
                                        <div class="jinjiNum">可获得晋级名额</div>
                                    </div>
                                    <div class="item">
                                        <div class="rankNum">{{get_group_detailDet.groupInfoList[0].rank}}</div>
                                        <div class="group">{{get_group_detailDet.groupInfoList[0].group==0?'A':'B'}}组</div>
                                        <div class="winNum">{{get_group_detailDet.groupInfoList[0].successCount}}</div>
                                        <div class="lostNum">{{get_group_detailDet.groupInfoList[0].outCount}}</div>
                                        <div class="jinjiNum">{{get_group_detailDet.groupInfoList[0].upCount}}</div>
                                    </div>
                                    <div class="item">
                                        <div class="rankNum">{{get_group_detailDet.groupInfoList[1].rank}}</div>
                                        <div class="group">{{get_group_detailDet.groupInfoList[1].group==0?'A':'B'}}组</div>
                                        <div class="wins">{{get_group_detailDet.groupInfoList[1].successCount}}</div>
                                        <div class="lostNum">{{get_group_detailDet.groupInfoList[1].outCount}}</div>
                                        <div class="jinjiNum">{{get_group_detailDet.groupInfoList[1].upCount}}</div>
                                    </div>
                                </div>
                                <div class="list list2" v-if="get_group_detailDet.groupAnchorRank">
                                    <div class="groupTil">A组排名</div>
                                    <div class="til">
                                        <div class="rankNum">排名</div>
                                        <div class="nick">主播昵称</div>
                                        <div class="uid">ID</div>
                                        <div class="wins">今日有效胜场</div>
                                    </div>
                                    <div class="itemWrap">
                                        <div class="item" v-for="(item, index) in get_group_detailDet.groupAnchorRank[get_group_detailDet.group1]" :key="index" :id="'leg3Rank2Ind' + index">
                                            <div class="devideLine" v-if="index == fail_lineDet[0]">
                                                <span></span>
                                                以下为淘汰区
                                                <span></span>
                                            </div>
                                            <div class="itemWrap" :class="{grey: item.loser}" >
                                                <div class="rankNum">{{item.rankNo}}</div>
                                                <div class="nick">{{subString( item.anchorName,8,true)}}</div>
                                                <div class="uid">{{item.anchorId}}</div>
                                                <div class="wins">{{item.success}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="goTop"  @click="goTop('leg3Rank2Ind0')"></div>
                                </div>
                                <div class="list list2" v-if="get_group_detailDet.groupAnchorRank">
                                    <div class="groupTil">B组排名</div>
                                    <div class="til">
                                        <div class="rankNum">排名</div>
                                        <div class="nick">主播昵称</div>
                                        <div class="uid">ID</div>
                                        <div class="wins">今日有效胜场</div>
                                    </div>
                                    <div class="itemWrap">
                                        <div class="item" v-for="(item, index) in get_group_detailDet.groupAnchorRank[get_group_detailDet.group2]" :key="index" :id="'leg3Rank3Ind' + index">
                                            <div class="devideLine" v-if="index == fail_lineDet[1]">
                                                <span></span>
                                                以下为淘汰区
                                                <span></span>
                                            </div>
                                            <div class="itemWrap" :class="{grey: item.loser}" >
                                                <div class="rankNum">{{item.rankNo}}</div>
                                                <div class="nick">{{subString( item.anchorName,8,true)}}</div>
                                                <div class="uid">{{item.anchorId}}</div>
                                                <div class="wins">{{item.success}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="goTop"  @click="goTop('leg3Rank3Ind0')"></div>
                                </div>
                            </div>
                        </template>
                        <div class="saicheng" v-if="leg3P2Tab2Index == 2">
                            <ul class="tab2">
                                <div class="tabWrap">
                                    <li v-for="(item, index) in get_pk_times_listDet" :key="index" :class="{ active: saichengTimeTabIndex==index }"
                                        @click="getsaichengTimeTabIndex(index)">{{ item.time }}
                                    </li>
                                </div>
                            </ul>
                            <div class="pkConfig">
                                <div class="item" v-for="(item, index) in get_pk_configsDet" :key="index">
                                    <div class="left">
                                        <div class="txWrap">
                                            <img v-if="item.state1 == 2" class="headImg toRoom"
                                                @click="jumpRoom(item.state1, item.roomId1, item.showtype1)" :src="item.anchorPic1 || empty" alt="">
                                            <img v-else class="headImg" :src="item.anchorPic1 || empty" alt="">
                                            <img v-if="item.state1 == 2" src="@/assets/img/ceremony/online.gif" alt="" class="online">
                                        </div>
                                        <p class="uname">{{ subString(item.anchorName1 || '酷炫达人',8,true) }}</p>
                                        <p class="uid">ID:{{ item.anchorId1 }}</p>
                                        <img src="@/assets/img/ceremony/leg3/win.png" alt="" class="win" v-if="item.win==1">
                                        <img src="@/assets/img/ceremony/leg3/draw.png" alt="" class="win" v-if="item.win==3">
                                        <div class="dabiao" :class="{grey: item.missWin}" v-if="item.win==1">PK票数{{item.missWin?'未':'已'}}达标</div>
                                    </div>
                                    <div class="right">
                                        <div class="txWrap">
                                            <img v-if="item.state2 == 2" class="headImg toRoom"
                                                @click="jumpRoom(item.state2, item.roomId2, item.showshowtype2type)" :src="item.anchorPic2 || empty" alt="">
                                            <img v-else class="headImg" :src="item.anchorPic2 || empty" alt="">
                                            <img v-if="item.state2 == 2" src="@/assets/img/ceremony/online.gif" alt="" class="online">
                                        </div>
                                        <p class="uname">{{ subString(item.anchorName2 || '酷炫达人',8,true) }}</p>
                                        <p class="uid">ID:{{ item.anchorId2 }}</p>
                                        <img src="@/assets/img/ceremony/leg3/win.png" alt="" class="win" v-if="item.win==2">
                                        <img src="@/assets/img/ceremony/leg3/draw.png" alt="" class="win" v-if="item.win==3">
                                        <div class="dabiao" :class="{grey: item.missWin}" v-if="item.win==2">PK票数{{item.missWin?'未':'已'}}达标</div>
                                    </div>
                                    <span class="score">{{ item.score1 }}:{{ item.score2 }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <rankAward :tab-index="tabIndex" v-else />
        </div>

        <Toast toast-style="leg1 leg3" v-if="store.state.showType == 'leg3'">
            <p class="close" @click="store.commit('changeIsShow')" />
            <div class="ruleBox" v-if="tabIndex<4">
                <div>
                    <p>赛段时间</p>
                    <p>03月25日00:00--03月27日24:00</p>
                </div>
                <div>
                    <p>晋级规则</p>
                    <p>参赛主播自行发起联赛PK，每天累积的有效胜场进行排名，每日都将淘汰排名末位的20名主播，有效胜场的要求逐日提升</p>
                    <ul class="ruleList">
                        <li><span></span>3月25日，有效胜场需满足PK票数≥50,000票；</li>
                        <li><span></span>3月26日，有效胜场需满足PK票数≥100,000票；</li>
                        <li><span></span>3月27日，有效胜场需满足PK票数≥150,000票</li>
                    </ul>
                    <p>每日的胜场数据都将清空重新统计</p>
                </div>
                <div>
                    <p>联赛壕礼</p>
                    <p>根据参赛主播每天累计的有效胜场，可获得对应奖励</p>
                    <ul class="ruleList">
                        <li><span></span>3月25日，每累计20场有效胜场，即可获得灯塔*1(单价50,000豆)</li>
                        <li><span></span>3月26日，每累计20场有效胜场，即可获得热气球*1(单价100,000豆)</li>
                        <li><span></span>3月27日，每累计20场有效胜场，即可获得小熊乐园*1(单价150,000豆)</li>
                    </ul>
                    <p><i>*</i>奖励将在每次完成收礼要求后，由系统自动发放~</p>
                </div>
            </div>
            <div class="ruleBox" v-else>
                <div>
                    <p>联赛PK时间</p>
                    <p>每晚19点</p>
                </div>
                <div>
                    <p>PK晋级规则：</p>
                    <div class="cycleBox">
                        <p class="cycleTitle"><span></span>1.第一日PK：</p>
                        <p>参赛主播将由系统自动分配为2组，每名主播将与本组中所有的主播，各进行一场单局定胜负的联赛PK，主播每局需满足PK票数≥200,000票才算有效，根据有效胜场进行组内排名，每组淘汰今日末位的4名主播</p>
                    </div>
                    <div class="cycleBox">
                        <p class="cycleTitle"><span></span>2.第二日PK：</p>
                        <p>每名参赛主播将与另一组中所有的主播，各进行一场单局定胜负的联赛PK，主播每局需满足PK票数≥200,000票才算有效，获胜后将为自己和本组累计1个胜场，所有PK结束后，按照对阵两组的累计总胜场决出胜负，淘汰对应主播并获得第三日组内PK的晋级名额，详情如下</p>
                        <div class="table">
                            <div class="til">
                                <span>赛果</span>
                                <span>淘汰名额</span>
                                <span>第3日晋级名额</span>
                            </div>
                            <div class="item">
                                <span>获胜组</span>
                                <span>组内排名最后4名</span>
                                <span>12人</span>
                            </div>
                            <div class="item">
                                <span>失利组</span>
                                <span>组内排名最后6名</span>
                                <span>8人</span>
                            </div>
                        </div>
                    </div>
                    <div class="cycleBox">
                        <p class="cycleTitle"><span></span>3.第三日PK：</p>
                        <p>每名主播将与本组剩余的所有主播，各进行一场单局定胜负的PK，主播每局需满足PK票数≥200,000票才算有效，获胜后将为自己累计1个胜场，最终根据本组在第二日中获得的晋级名额，结合组内排名获得晋级</p>
                    </div>
                    <p>胜场相同时均将按照PK中的PK总票数排名</p>
                </div>
                <div>
                    <p>联赛壕礼</p>
                    <p>根据主播当天累计的联赛PK有效胜场，可获得对应奖励,每累计10个有效胜场，即可获得小熊乐园*1(单价150,000豆)</p>
                    <p><i>*</i>奖励将在每次完成收礼要求后，由系统自动发放~</p>
                </div>
                <div>
                    <p>赛段奖励</p>
                    <p>所有晋级的主播均可获得晋级封面角标-春季决战</p>
                </div>
            </div>
        </Toast>
    </div>
</template>

<style lang='scss' scoped></style>